<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit">
	<title>ABQ管理系统首页</title>
	<meta name="keywords" content="ABQ管理系统首页">
	<meta name="description" content="ABQ管理系统首页">
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html"/>
	<![endif]-->
	<link th:href="@{favicon.ico}" rel="stylesheet"/>
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/animate.css}" rel="stylesheet"/>
	<link th:href="@{/css/style.css}" rel="stylesheet"/>
	<link th:href="@{/ruoyi/css/ry-ui.css?v=3.1.0}" rel="stylesheet"/>

	<link th:href="@{/im/css/ukefu.css}" rel="stylesheet"/>
	<link th:href="@{/im/css/default/ukefu.css}" rel="stylesheet"/>
	<link th:href="@{/im/js/kindeditor/themes/default/default.css}" rel="stylesheet"/>

	<style type="text/css">
		.nav > li:hover .dropdown-menu {display: block;}
		#content-main.max { height: calc(100% - 110px); overflow: hidden; width: 100%; height: 100%; left: 0px; position: absolute; top: 0px; z-index: 9998; margin: 0; }
	</style>
</head>
<body>
<div id="containter" class="clearfix" style="margin-right:200px;">
	<div class="content-left">
		<div class="chat-above" id="above">
			<!--<div class="clearfix message connect-message">
				<span id="connect-message" style="background-color:#FFFFFF;color:#4665d4;">
					<a href="javascript:void(0)" style="color:#4665d4;">
						<i class="layui-icon">&#xe63a;</i>
						查看更多消息
					</a>
				</span>
			</div>-->

			<div th:each="chatMessage : ${chatMessageList}" class="clearfix chat-block">

				<div class="chat-right" th:if="${chatMessage.userid} eq ${thisUser.id}">
					<img class="user-img" src="/im/img/user.png" alt="">
					<div class="chat-message">
						<label class="time" th:text="${chatMessage.createtime}"></label>
						<label class="user" th:text="${chatMessage.username}"></label>
					</div>
					<div class="chatting-right">
						<i class="arrow"></i>
						<div class="chat-content" th:utext="${chatMessage.message}"></div>
					</div>
				</div>

				<div class="clearfix chat-block" th:if="${chatMessage.userid} ne ${thisUser.id}">
					<div class="chat-left">
						<img class="user-img" src="/im/img/user.png" alt="">
						<div class="chat-message">
							<label class="user" th:text="${chatMessage.username}"></label>
							<label class="time" th:text="${chatMessage.createtime}"></label>
						</div>
						<div class="chatting-left">
							<i class="arrow"></i>
							<div class="chat-content" th:utext="${chatMessage.message}"></div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<div class="chat-bottom" id="bottom">
			<textarea id="message" name="content" style="visibility:hidden;"></textarea>
			<div class="btn-push clearfix">
				<div style="float:left;height:24px;line-height:34px;margin: 5px 20px 10px 5px;" id="surplus">0/200</div>
				<button type="button" class="send-btn active special  clearfix" id="sent" onclick="sendMessage()" style="background-color:#32c24d;font-weight: 200;padding:5px;">
					发送
				</button>
			</div>
		</div>
	</div>
	<div class="content-rig">
		<div class="content-head">
			<p>订单信息</p>
		</div>
		<div class="content-list">
			<ul>
				<li>
					<label>商家：</label>
					<label th:text="${orderAll.aerchantName}"></label>
				</li>
				<li>
					<label>承兑商：</label>
					<label th:text="${orderAll.acceptName}"></label>
				</li>
				<li>
					<label>内部单号：</label>
					<label th:text="${orderAll.orderNo}"></label>
				</li>
				<li>
					<label>外部单号：</label>
					<label th:text="${orderAll.outOrderId}"></label>
				</li>
				<li>
					<label>数量：</label>
					<label th:text="${orderAll.usdtNo}"></label>
				</li>
				<li>
					<label>法币金额：</label>
					<label th:text="${orderAll.currencyNum}"></label>
				</li>
			</ul>
		</div>
		<div class="content-bottom">
			<span id="welcome-message">
			</span>
		</div>
	</div>
</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<!--<script src="http://tajs.qq.com/stats?sId=62048022"></script>-->
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.1.0}"></script>
<script th:src="@{/ruoyi/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/ruoyi/js/common.js}"></script>

<script th:src="@{/im/js/layui/layui.js}"></script>
<script th:src="@{/im/js/kindeditor/kindeditor.js}"></script>
<script th:src="@{/im/js/kindeditor/lang/zh-CN.js}"></script>
<script th:src="@{/im/js/socket.io.js}"></script>


<script type="text/javascript">
    var editor , words;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            autoHeightMode: false,
            width: "100%",
            resizeType: 0,
            themeType: 'simple',
            fontsize: 14,
            newlineTag : "br" ,
            filterMode:true,
            items: ['emoticons', 'cut'],
            afterChange : function() {
                var count = this.count() ;

                words = this.count("text") ;
                var pattern = '字数：' + words + '字';
                document.getElementById('surplus').innerHTML = "字符： "+count+"  ，文字：" + pattern; //输入显示
                ////////
            },
            afterCreate : function() { //设置编辑器创建后执行的回调函数
                var self = this;
                //Ctrl+Enter提交表单
                K.ctrl(document, 13, function() {
                    self.sync();
                    sendMessage();
                });
                K.ctrl(self.edit.doc, 13, function() {
                    self.sync();
                    sendMessage();
                });
            }
        });
    });
    KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
    var R3Ajax = {
        ajax:function(opt){
            var xhr = this.createXhrObject();
            xhr.onreadystatechange = function(){
                if(xhr.readyState!=4) return ;
                (xhr.status===200 ?
                    opt.success(xhr.responseText,xhr.responseXML):
                    opt.error(xhr.responseText,xhr.status));
            }
            xhr.open(opt.type,opt.url,true);
            if(opt.type!=='post')
                opt.data=null;
            else
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            opt.data = this.parseQuery(opt.data);
            xhr.send(opt.data);
        },
        post:function(url,success,data){
            var popt = {
                url:url,
                type:'post',
                data:data,
                success:success,
                error:function(data){}
            }
            this.ajax(popt);
        },
        get:function(url,success){
            var gopt = {
                url:url,
                type:'get',
                success:success,
                error:function(){}
            }
            this.ajax(gopt);
        },
        createXhrObject:function(){
            var methods = [
                function(){ return new XMLHttpRequest();},
                function(){ return new ActiveXObject('Msxml2.XMLHTTP');},
                function(){ return new ActiveXObject('Microsoft.XMLHTTP');}
            ];
            for(var i=0;len=methods.length,i<len;i++){
                try{
                    methods[i]();
                }catch(e){
                    continue;
                }
                this.createXhrObject = methods[i];
                return methods[i]();
            }
            throw new Error('Could not create an XHR object.');
        },
        parseQuery:function(json){
            if(typeof json == 'object'){
                var str = '';
                for(var i in json){
                    str += "&"+i+"="+encodeURIComponent(json[i]);
                }
                return str.length==0 ? str : str.substring(1);
            }else{
                return json;
            }
        }
    };
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    var R3Helper = {
        resize : function(){
            var height = document.body.offsetHeight ;
            document.getElementById('above').style.height = (height - 194 - 50)+"px" ;
        }
    }
</script>
<script>
    var user = "[[${thisUser.id}]]";
    var touser = "";
    var userName = "[[${thisUser.realname}]]";
    var touserName = "";
    var orgi = "[[${orderAll.id}]]";
    var session = "[[${thisUser.id}]]";

    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });
    // var connetImUrl = "http://"+${top.hostname!''!''}+":"+${top.port!''!''}+"/im/ent?userid=${user.id!''!''}&orgi=${user.orgi!''}&contextid=${contextid!''}";
    var connetImUrl = "http://[[${top.hostname}]]:[[${top.port}]]/im/user?userid=[[${thisUser.id}]]&orgi=[[${orderAll.id}]]&contextid=2222222";
    console.info(connetImUrl);
    var socket = io.connect(connetImUrl);
    socket.on('connect',function() {
        console.log("连接初始化成功");
        socket.emit('new', {
            user:"[[${thisUser.id}]]",
            type:"new" ,
            session:"[[${thisUser.id}]]",
            touser:"",
            contextid:"[[${thisUser.id}]]",
            orgi:"[[${orderAll.id}]]",
            message : '用户初始化'
        });
        //请求服务端记录 当前用户在线事件
    }).on('disconnect',function() {
        console.log("连接已断开");
        //请求服务端记录，当前用户离线
    }).on('new', function(data) {
        console.log("new 回到");
    });
    socket.on('message', function(data) {
        console.info(data);
        if(data.userid == user){
            output('<div  class="clearfix chat-block"><div class="chat-right"><img class="user-img" src="/im/img/user.png" alt="">' +
                '<div class="chat-message"><label class="time">'+data.createtime+'</label>' +
                '<label class="user" >'+ data.username +'</label></div><div class="chatting-right"><i class="arrow"></i>' +
                '<div class="chat-content" >'+data.message+'</div></div></div></div>');
        }else {
            output('<div  class="clearfix chat-block"><div class="chat-left"><img class="user-img" src="/im/img/user.png" alt="">' +
                '<div class="chat-message"><label class="user" >'+ data.username +'</label>' +
                '<label class="time">'+data.createtime+'</label></div><div class="chatting-left"><i class="arrow"></i>' +
                '<div class="chat-content" >'+data.message+'</div></div></div></div>');
        }
    });

    socket.on('status',function(data){
        if(data.contextid == '${entimuser.id}'){
            if(data.message == 'online'){
                top.$('#chat_${entimuser.id}').removeClass('offline').removeClass('online').addClass('online').attr('title' , '在线');
            }else if(data.message == 'offline'){
                top.$('#chat_${entimuser.id}').removeClass('online').removeClass('offline').addClass('offline').attr('title' , '离线');
            }
        }
    })

    function sendMessage() {
        editor.sync();
        var count = editor.count("text");
        if(count>0){
            var message = document.getElementById('message').value;
            if(message!= ""){
                socket.emit('message', {
                    userid:"[[${thisUser.id}]]",
                    type:"message" ,
                    session:"[[${thisUser.id}]]",
                    touser:"",
                    contextid:"[[${thisUser.id}]]",
                    orgi:"[[${orderAll.id}]]",
                    message : message
                });
            }
            editor.html('');
        }
    }

    function output(message , clazz) {
        if(clazz == "message connect-message"){
            var messages = document.getElementsByClassName("connect-message") ;
            for(inx =0 ; inx < messages.length ; ){
                document.getElementById('above').removeChild(messages[inx]) ;
                inx++ ;
            }
        }
        var element = ("<div class='clearfix "+clazz+"'>" +" " + message + "</div>");
        document.getElementById('above').innerHTML= (document.getElementById('above').innerHTML + element);
        document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
    }
    document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
    // <#if online?? && online == true>
    // top.$('#chat_${entimuser.id}').removeClass('offline').addClass('online').attr('title' , '在线');
    // </#if>

</script>
</body>
</html>